<template>
  <div>
    <div class="title-row">
      <span class="title-row-bar" />
      库级热备总量(当天)
    </div>

    <div class="panel-group">
      <div
        class="card-panel total"
        @click="
          $router.push({
            path: '/logAnalysis/database',
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">总记录数</div>
          <count-to
            :start-val="0"
            :end-val="totalNum"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>
      <div
        class="card-panel green"
        @click="
          $router.push({
            path: '/logAnalysis/database',
            query: { taskState: '已完成' },
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">已完成</div>
          <count-to
            :start-val="0"
            :end-val="successNum"
            :duration="2600"
            class="card-panel-num"
          />
        </div>
      </div>

      <!-- <div
        class="card-panel orange"
        @click="
          $router.push({
            path: '/logAnalysis/database',
            query: { taskState: '待执行' },
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">待执行</div>
          <count-to
            :start-val="0"
            :end-val="waitNum"
            :duration="3200"
            class="card-panel-num"
          />
        </div>
      </div> -->

      <div
        class="card-panel "
        @click="
          $router.push({
            path: '/logAnalysis/database',
            query: { taskState: '进行中' },
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">进行中</div>
          <count-to
            :start-val="0"
            :end-val="goingNum"
            :duration="3200"
            class="card-panel-num"
          />
        </div>
      </div>

      <div
        class="card-panel red"
        @click="
          $router.push({
            path: '/logAnalysis/database',
            query: { taskState: '失败' },
          })
        "
      >
        <div class="card-panel-description">
          <div class="card-panel-text">失败</div>
          <count-to
            :start-val="0"
            :end-val="failNum"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>
    </div>
    <!-- Chart -->
    <div
      id="libStandby"
      style="width: 100%; height: 300px"
    />
  </div>
</template>

<script>
import chartApi from '@/api/dashboard/charts'
import '@/assets/styles/chartPanel.scss'
import CountTo from 'vue-count-to'
import echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      successNum: 0,
      failNum: 0,
      waitNum: 0,
      goingNum: 0,
      totalNum: 0
    }
  },
  async mounted() {
    await this.getData()
    this.hotStandbyChart()
  },
  methods: {
    async getData() {
      const res = await chartApi.getHotBackupLibraryTotal()
      this.totalNum = res.total
      for (const state in res) {
        if (state === 'completed') {
          this.successNum = res[state]
        } else if (state === 'fail') {
          this.failNum = res[state]
        } else if (state === 'toBeExecuted') {
          this.waitNum = res[state]
        } else if (state === 'inProgress') {
          this.goingNum = res[state]
        }
      }
    },
    hotStandbyChart() {
      var myChart = echarts.init(document.getElementById('libStandby'))

      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '0',
          data: ['已完成', '失败', '进行中']
        },
        calculable: true,
        series: [
          {
            name: '热备任务',
            type: 'pie',
            center: ['50%', '50%'],
            data: [
              {
                value: this.successNum,
                name: '已完成',
                itemStyle: { color: '#67C23A' }
              },
              {
                value: this.failNum,
                name: '失败',
                itemStyle: { color: '#F56C6C' }
              },
              // {
              //   value: this.waitNum,
              //   name: '待执行',
              //   itemStyle: { color: '#E6A23C' }
              // },
              {
                value: this.goingNum,
                name: '进行中',
                itemStyle: { color: '#3F9EFF' }
              }
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
      const erd = elementResizeDetectorMaker()
      erd.listenTo(document.getElementById('hotStandby'), (element) => {
        myChart.resize()
      })
    }
  }
}
</script>
